<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    /**
     * 绘制矩形的方法
     *    CanvasRenderingContext2D.strokeRect
     *    CanvasRenderingContext2D.fillRect
     *    CanvasRenderingContext2D.rect
     *   注意: rect 方法就是矩形路径, 还需要使用 fill 或 stroke 才可以看到效果. 因此一般使用 strokeRect 或 fillRect 直接可以看到结果.
     *
     *   清除矩形区域
     *
     *    CanvasRenderingContext2D.clearRect
     */
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");


        canvas.width = 500;
        canvas.height = 500;
        canvas.style.border = "1px solid #000";

        ctx.strokeStyle = 'red';
        //CanvasRenderingContext2D.strokeRect( x, y, width. height )
        ctx.strokeRect(100 , 100 , 200 , 100);

        ctx.beginPath();
        //绘制填充矩形
        ctx.fillStyle = 'green';
        //CanvasRenderingContext2D.fillRect( x, y, width. height )
        ctx.fillRect( 200 , 200 , 200 , 100);

        ctx.beginPath();
        ctx.fillRect( 300 , 300 , 200 , 100);
        //清除矩形区域
        //CanvasRenderingContext2D.clearRect( x, y, width, height )
        ctx.clearRect( 310 , 310 , 50 , 50);


    }
</script>

</body>
</html>